<template>
  <div>
    <div class="upload-components">
      <el-upload
        list-type="picture-card"
        ref="upload"
        multiple
        accept=".mp4, .MP4"
        :show-file-list="false"
        :auto-upload="true"
        :headers="headers"
        :http-request="uploadFileFun"
        class="upload-comp img-space"
      >
        <template #default>
          <div class="icon-plus">
            <span class="icon-plus-inner">
              <i class="el-icon-plus"></i>
              <span class="icon-plus-txt">上传视频</span>
            </span>
          </div>
        </template>
      </el-upload>
      <!-- 图片预览 -->
      <div class="img-list img-space" v-for="(item, i) in imgObj.srcList" :key="i">
        <video width="146" height="146" controls class="img-preview">
          <source :src="item" type="video/mp4">
        </video>
        <i class="el-icon-error close-icon" @click="handleRemove(i)"></i>
      </div>
    </div>
    <div class="upload-tip">{{ uploadTip }}</div>
  </div>
</template>

<script lang="ts">
import { defineComponent, nextTick, watch, ref, reactive } from "vue";
import { ElMessage, ElMessageBox, ElLoading } from "element-plus";

export default defineComponent({
  components: {},
  props: {
    uploadTip: {
      type: String,
      default: '只支持. MP4 格式，像素为398*398，大小10MB以内！'
    }
  },
  setup(props, ctx) {
    const headers = reactive({
      // 附件上传需要的token
      Authorization: ""
    });
    const imgObj = reactive({
      url: "",
      srcList: []
    });
    // 删除图片
    const handleRemove = i => {
      imgObj.srcList.splice(i, 1);
    };
    const uploadFileFun = params => {
      console.log(params);

      const _file = params.file;
      const isLt2M = _file.size / 1024 / 1024 <= 10;
      const fileTpye = [".mp4", ".MP4"];
      const type = _file.name.substr(_file.name.lastIndexOf(".")).toUpperCase();
      if (!fileTpye.includes(type)) {
        ElMessage.error(
          "温馨提示：只支持.MP4 格式，像素为398*398，大小10MB以内！"
        );
        return;
      }
      // 通过 FormData 对象上传文件
      var formData = new FormData();
      formData.append("file", _file);

      if (!isLt2M) {
        ElMessage.error("文件最大不能超过10MB");
        return false;
      }
      let loading = ElLoading.service({
        lock: true,
        text: "上传中...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      // 上传图片接口
      // uploadFile(formData).then(res => {
      loading.close();
      // });

      let reader = new FileReader();
      reader.readAsDataURL(_file);
      let blob = null;
      reader.onload = e => {
        console.log(e);
        if (imgObj.srcList.length >= 2) {
          ElMessage.error(
            "温馨提示：最多可上传1个mp4视频"
          );
          return;
        }
        imgObj.srcList.push(e.target.result);
      };
    };
    return {
      imgObj,
      handleRemove,
      uploadFileFun
    };
  }
});
</script>

<style lang="scss" scoped>
.upload-components {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  .img-space {
    margin: 0 10px 10px 0;
  }
}
.icon-plus {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 146px;
  height: 146px;
  .icon-plus-inner {
    height: 50px;
    line-height: 20px;
  }
  .icon-plus-txt {
    height: 20px;
    display: block;
    line-height: 20px;
  }
}
.img-preview {
  width: 148px;
  height: 148px;
  border-radius: 5px;
  border: 1px solid #eee;
  box-shadow: 0 0 5px #eee;
  // background: #fbfdff;
  background: #ffffff;
}
.img-list {
  position: relative;
  .close-icon {
    position: absolute;
    top: -10px;
    right: -10px;
    color: #ff7878;
    font-size: 20px;
    background: #ffffff;
    border-radius: 50%;
    cursor: pointer;
    &:hover {
      opacity: 0.9;
    }
  }
}
.upload-tip{
  color: #a2a2a2;
}
</style>